<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影管理 - 管理员后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .admin-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .movie-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .movie-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }
        .movie-poster {
            width: 120px;
            height: 160px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        .movie-info {
            padding: 1rem;
        }
        .movie-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }
        .movie-subtitle {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        .movie-details {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .detail-item {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: #666;
        }
        .detail-item i {
            width: 16px;
            margin-right: 8px;
            color: #667eea;
        }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .status-coming-soon {
            background: #fff3cd;
            color: #856404;
        }
        .status-now-showing {
            background: #d1edff;
            color: #0c5460;
        }
        .status-ended {
            background: #f8d7da;
            color: #721c24;
        }
        .btn-action {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
            margin: 0.2rem;
            border-radius: 6px;
            min-width: 80px;
        }
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: stretch;
        }
        .status-section {
            text-align: center;
            padding: 1rem;
            border-left: 1px solid #eee;
        }
        .movie-meta {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 0.75rem;
            margin-top: 1rem;
        }
        .rating-badge {
            background: #667eea;
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .movie-poster {
                width: 100px;
                height: 140px;
            }
            .movie-info {
                padding: 0.75rem;
            }
            .movie-title {
                font-size: 1.1rem;
            }
            .action-buttons {
                flex-direction: row;
                flex-wrap: wrap;
            }
            .btn-action {
                flex: 1;
                min-width: auto;
                font-size: 0.75rem;
                padding: 0.3rem 0.5rem;
            }
            .status-section {
                border-left: none;
                border-top: 1px solid #eee;
                padding: 0.75rem;
            }
        }

        @media (max-width: 576px) {
            .movie-card .row {
                flex-direction: column;
            }
            .movie-poster {
                width: 80px;
                height: 110px;
                margin: 0 auto;
            }
            .action-buttons {
                justify-content: center;
            }
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <div class="container">
            <a class="navbar-brand fw-bold" href="${pageContext.request.contextPath}/admin/">
                <i class="fas fa-cog me-2"></i>管理员后台
            </a>

            <div class="navbar-nav ms-auto">
                <!-- 主要管理功能 -->
                <a class="nav-link" href="${pageContext.request.contextPath}/admin/movies">
                    <i class="fas fa-film me-1"></i>电影管理
                </a>
                <a class="nav-link" href="${pageContext.request.contextPath}/admin/showtimes">
                    <i class="fas fa-calendar-alt me-1"></i>场次管理
                </a>
                <a class="nav-link" href="${pageContext.request.contextPath}/movies">
                    <i class="fas fa-home me-1"></i>前台首页
                </a>

                <!-- 用户菜单 -->
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/admin/statistics">
                            <i class="fas fa-chart-bar me-2"></i>统计报表
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 管理员头部 -->
    <section class="admin-header">
        <div class="container">
            <h2><i class="fas fa-film me-2"></i>电影管理</h2>
            <p class="mb-0">管理系统中的所有电影信息</p>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 成功消息 -->
        <c:if test="${not empty message}">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </c:if>

        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 快捷操作区域 -->
        <div class="row mb-4">
            <div class="col-md-8">
                <h4>电影列表</h4>
            </div>
            <div class="col-md-4 text-end">
                <div class="btn-group" role="group">
                    <a href="${pageContext.request.contextPath}/admin/movies?action=add" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>添加电影
                    </a>
                    <a href="${pageContext.request.contextPath}/admin/showtimes?action=add" class="btn btn-success">
                        <i class="fas fa-calendar-plus me-2"></i>添加场次
                    </a>
                    <a href="${pageContext.request.contextPath}/admin/showtimes" class="btn btn-outline-primary">
                        <i class="fas fa-calendar-alt me-2"></i>场次管理
                    </a>
                </div>
            </div>
        </div>

        <!-- 管理提示 -->
        <div class="alert alert-info mb-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h6 class="mb-1"><i class="fas fa-lightbulb me-2"></i>管理提示</h6>
                    <small>添加电影后，记得为电影安排场次，用户才能进行订票。</small>
                </div>
                <div class="col-md-4 text-end">
                    <a href="${pageContext.request.contextPath}/admin/showtimes" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-arrow-right me-1"></i>去管理场次
                    </a>
                </div>
            </div>
        </div>

        <!-- 电影列表 -->
        <c:if test="${empty movies}">
            <div class="text-center py-5">
                <i class="fas fa-film fa-3x text-muted mb-3"></i>
                <h5>暂无电影</h5>
                <p class="text-muted">点击上方按钮添加第一部电影</p>
            </div>
        </c:if>

        <c:forEach var="movie" items="${movies}">
            <div class="card movie-card">
                <div class="card-body p-0">
                    <div class="row g-0">
                        <!-- 电影海报 -->
                        <div class="col-md-2 col-lg-2">
                            <div class="p-3">
                                <img src="${movie.posterUrl != null ? movie.posterUrl : '/images/default-poster.jpg'}"
                                     class="movie-poster w-100" alt="${movie.title}">
                            </div>
                        </div>

                        <!-- 电影信息 -->
                        <div class="col-md-5 col-lg-5">
                            <div class="movie-info">
                                <div class="movie-title">${movie.title}</div>
                                <c:if test="${not empty movie.englishTitle}">
                                    <div class="movie-subtitle">${movie.englishTitle}</div>
                                </c:if>

                                <div class="movie-details">
                                    <div class="detail-item">
                                        <i class="fas fa-user-tie"></i>
                                        <span>导演：${movie.director}</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-users"></i>
                                        <span>主演：${movie.actors}</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-tags"></i>
                                        <span>类型：${movie.genre}</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-clock"></i>
                                        <span>时长：${movie.duration}分钟</span>
                                    </div>
                                    <c:if test="${not empty movie.rating}">
                                        <div class="detail-item">
                                            <i class="fas fa-star"></i>
                                            <span>评级：<span class="rating-badge">${movie.rating}</span></span>
                                        </div>
                                    </c:if>
                                </div>

                                <div class="movie-meta">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="text-muted">
                                                <i class="fas fa-calendar me-1"></i>
                                                上映日期：
                                                <c:if test="${not empty movie.releaseDate}">
                                                    <fmt:formatDate value="${movie.releaseDate}" pattern="yyyy-MM-dd"/>
                                                </c:if>
                                                <c:if test="${empty movie.releaseDate}">
                                                    未设置
                                                </c:if>
                                            </small>
                                        </div>
                                        <div class="col-6">
                                            <small class="text-muted">
                                                <i class="fas fa-globe me-1"></i>
                                                语言：${movie.language}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 状态信息 -->
                        <div class="col-md-2 col-lg-2">
                            <div class="status-section h-100 d-flex flex-column justify-content-center">
                                <div class="mb-3">
                                    <c:choose>
                                        <c:when test="${movie.status == 'COMING_SOON'}">
                                            <span class="status-badge status-coming-soon">即将上映</span>
                                        </c:when>
                                        <c:when test="${movie.status == 'NOW_SHOWING'}">
                                            <span class="status-badge status-now-showing">正在热映</span>
                                        </c:when>
                                        <c:when test="${movie.status == 'ENDED'}">
                                            <span class="status-badge status-ended">已下架</span>
                                        </c:when>
                                    </c:choose>
                                </div>

                                <div class="text-center">
                                    <small class="text-muted">
                                        <i class="fas fa-hashtag me-1"></i>ID: ${movie.id}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="col-md-3 col-lg-3">
                            <div class="p-3">
                                <div class="action-buttons">
                                    <!-- 状态切换按钮 -->
                                    <c:if test="${movie.status != 'NOW_SHOWING'}">
                                        <button type="button" class="btn btn-success btn-action"
                                                onclick="updateStatus(${movie.id}, 'NOW_SHOWING')">
                                            <i class="fas fa-play me-1"></i>上架
                                        </button>
                                    </c:if>
                                    <c:if test="${movie.status == 'NOW_SHOWING'}">
                                        <button type="button" class="btn btn-warning btn-action"
                                                onclick="updateStatus(${movie.id}, 'ENDED')">
                                            <i class="fas fa-stop me-1"></i>下架
                                        </button>
                                    </c:if>

                                    <!-- 编辑按钮 -->
                                    <a href="${pageContext.request.contextPath}/admin/movies?action=edit&id=${movie.id}"
                                       class="btn btn-outline-primary btn-action">
                                        <i class="fas fa-edit me-1"></i>编辑信息
                                    </a>

                                    <!-- 管理场次 -->
                                    <a href="${pageContext.request.contextPath}/admin/showtimes?movieId=${movie.id}"
                                       class="btn btn-outline-success btn-action">
                                        <i class="fas fa-calendar-alt me-1"></i>管理场次
                                    </a>

                                    <!-- 查看详情 -->
                                    <a href="${pageContext.request.contextPath}/movie/detail?id=${movie.id}"
                                       class="btn btn-outline-info btn-action" target="_blank">
                                        <i class="fas fa-eye me-1"></i>前台预览
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function updateStatus(movieId, status) {
            const statusText = status === 'NOW_SHOWING' ? '上架' : '下架';

            if (confirm('确定要' + statusText + '这部电影吗？')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/admin/movies'
                });

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'updateStatus'
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'movieId',
                    value: movieId
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'status',
                    value: status
                }));

                $('body').append(form);
                form.submit();
            }
        }
    </script>
</body>
</html>
